<template>
	<div id="w-aside">
		<el-menu
			ref="oElMenu"
			class="el-menu-vertical-demo bg-aside"
			text-color="#fff"
			active-text-color="#fff"
			:default-active="active"
			router
			:collapse-transition="false"
		>
			<el-submenu class="bg-aside" :index="item.index" v-for="(item, i) in list" :key="item.index">
				<template #title>
					<span>{{item.name}}</span>
				</template>
				<el-menu-item
					v-for="(innerItem, j) in item.children"
					:key="j"
					class="bg-aside"
					:index="innerItem.vueUrl"
					:route="innerItem.vueUrl"
				>
					<!--<w-icon class="inner-icon" :icon="innerItem.icon" />-->
					<el-image class="icon-nav" :src="innerItem.icon" fit="fill" />
					<span>{{innerItem.name}}</span>
				</el-menu-item>
			</el-submenu>
		</el-menu>
	</div>
</template>

<script>
import iconNav0         from '@/assets/images/icon-nav-0.png'
import iconNav1         from '@/assets/images/icon-nav-1.png'
import { getUrlSearch } from '@/utils/index.js'


export default {
	name    : "WAside",
	data() {
		return {
			iconNav0: iconNav0,
			iconNav1: iconNav1,
			list    : [
				/*{
					name    : '项目流程设置',
					children: [
						{vueUrl: '/template-management', icon: iconNav0, name: '模板管理'},
						{vueUrl: '/task-settings', icon: iconNav0, name: '任务设置'},
					]
				},
				{
					name    : '项目管理',
					children: [
						{vueUrl: '/task-reporting', icon: iconNav0, name: '任务上报'},
					]
				},
				{
					name    : '项目进度管理',
					children: [
						{vueUrl: '/task-supervisor-reminder', icon: iconNav0, name: '任务督办提醒'},
						{vueUrl: '/task-timeout-warning', icon: iconNav0, name: '任务超时预警'},
						{vueUrl: '/project-progress-tracking', icon: iconNav0, name: '项目进度跟踪'},
					]
				},
				{
					name    : '项目统计分析',
					children: [
						{vueUrl: '/statistics-of-projects-under-construction', icon: iconNav0, name: '在建项目统计'},
						{vueUrl: '/statistics-of-archived-projects', icon: iconNav0, name: '已归档项目统计'},
					]
				},
				{
					name    : '时效管理',
					children: [
						{vueUrl: '/task-aging-settings', icon: iconNav0, name: '任务时效设置'},
					]
				},
				{
					name    : '项目预警管理',
					children: [
						{vueUrl: '/overtime-warning-information-management', icon: iconNav0, name: '超时预警信息管理'},
						{vueUrl: '/analysis-of-timeliness-warning', icon: iconNav0, name: '时效预警分析'},
						{vueUrl: '/early-warning-analysis-of-bidding-and-purchasing', icon: iconNav0, name: '招采预警分析'},
					]
				},
				{
					name    : '基础数据管理',
					children: [
						{vueUrl: '/configuration-of-important-information', icon: iconNav0, name: '要件信息配置'},
					]
				},*/
			]
		};
	},
	computed: {
		menuData() {
			return this.$store.state.menuData
		},
		active() {
			return this.$store.state.defaultActive
		},
		belongTo() {
			return this.$store.state.belongTo
		}
	},
	watch   : {
		belongTo: {
			immediate: true,
			handler(newVal) {
				this.changeMenuStyle(newVal);
			}
		}
	},
	methods : {
		changeMenuStyle(newVal) {
			// console.log('watch active', newVal);
			if (!newVal) return;
			this.list.forEach(item => {
				if (item.children && Array.isArray(item.children) && item.children.length) {
					item.children.forEach(innerItem => {
						if (innerItem.icon !== iconNav0) {
							innerItem.icon = iconNav0; //未选状态
						}
						if (newVal.indexOf(innerItem.vueUrl) > -1) {
							innerItem.icon = iconNav1; //已选状态
							this.$nextTick(() => {
								this.$refs['oElMenu'].open(item.index);
							})
						}
					})
				}
			})
		},
		//处理返回菜单数据结构--胡贺峰
		tree(data) {
			var temp = {};
			data.forEach(el => {
				temp[el.id] = el;
				el.children = [];
			});
			let result = [];
			data.forEach(child => {
				child.icon = iconNav0; //菜单图标
				const mapItem = temp[child.parentId];
				if (mapItem) {
					(mapItem.children || (mapItem.children = [])).push(child);
				}
				else {
					result.push(child);
				}
			})
			return result;
		},
		//过虑返回菜单数据结构--胡贺峰
		getData(arr, id) {
			return arr.filter(le => {
				return le.id == id
			})
		},
		//获取权限菜单
		getAuthMenu({ token, id, data } = {}) {
			if (!token || !id) return;
			const result = this.tree(data)
			const tempList = this.getData(result, id); //859

			//给每个<el-submenu>添加index
			tempList[0].children.forEach((item, i) => {
				item.index = String(i)
			});

			this.list = tempList[0].children;
			this.changeMenuStyle(this.belongTo);

			//进入第1个有权限的路由
			if (this.$store.state.firstLogin) {
				this.$store.commit('setState', { firstLogin: false })
				const path = this.list[0].children[0].vueUrl;
				console.log('执行了进入第1个有权限的路由, 第1个路由是', path);
				this.$router.push({ path })
			}
		},
	},
	created() {
		//
		this.getAuthMenu({
			token: this.$store.state.token,
			id   : getUrlSearch('id'),
			data : this.menuData
		});

	},
}
</script>

<style lang="scss" scoped>
	#w-aside /deep/ .el-menu {
		border-right: none;
	}

	.el-menu-vertical-demo /deep/ .el-submenu.is-active.is-opened {
		.el-submenu__title {
			border-left: 4px solid #6892ee;
			background-image: linear-gradient(270deg, rgba(80, 111, 251, 0) 0%, rgba(80, 111, 251, 0.2) 100%);
		}
	}

	.el-menu-vertical-demo /deep/ .el-submenu {
		.el-submenu__title:hover {
			background-color: #011c40;
		}
	}

	.inner-icon {
		font-size: 20px;
		margin-right: 10px;
	}

	.el-menu-vertical-demo:not(.el-menu--collapse) {
		margin-top: 45px;
		width: 300px;
		height: inherit;
		min-height: 200px;
	}

	.icon-nav {
		margin-right: 20px;
		width: 12px;
		height: 12px;
		border-radius: 100%;
		overflow: hidden;
	}

	.bg-aside {
		background-color: #011c40;

		&:hover {
			background-color: #011c40;
		}

		&:focus {
			background-color: #011c40;
		}
	}

	.bg-aside.is-active {
		background-color: #011c40;

		&:hover {
			background-color: #011c40;
		}
	}
</style>
